<%--
  @desc: 应用查看或编辑页面
  @author: chenw
  @create: 2014-4-29 下午 15:32
--%>
<%@ page contentType="text/html;charset=utf-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<style type="text/css">
    .pageContent label {
        width: 100px;
    }
    .pageFormContent p {
        width: 430px;
    }
    
   
    .uploadify-queue {
        float: left;
        display: inline-block;
        height: 20px;
        line-height: 20px;
        margin: 0;
        margin-top: 20px;
    }
    .uploadify-queue-item {
        margin: 0;
        height: 20px;
        padding: 0;
        margin-left: 10px;
        width: 400px;
    }
    .uploadify-queue-item .cancel {
        padding-top: 1px;
    }
    .uploadify-queue-item .cancel a {
        float: right;
        height: 16px;
        font-size: 11px;
        margin-left: 5px;
        margin-right: 5px;
        line-height: 16px;
        background-image: none;
        width: 30px;
        text-indent: 5px;
        cursor: pointer;
        text-decoration: none;
    }
    .uploadify-queue-item .fileName, .uploadify-queue-item .data {
        font-size: 11px;
        color: gray;
    }
    .uploadify-queue-item .uploadify-progress {
        margin: 0;
        margin-top: 3px;
    }
    #icon_show {
        display: inline-block;
        line-height: 20px;
        text-indent: 10px;
        color: gray;
        width: 60px;
        height: 60px;
        margin-left: 10px;
        border: 1px solid #ccc;
        border-radius: 3px;
    }
</style>
<!--/sys/app/edit'-->
<div class="pageContent" style="padding-top: 1px;">

    <form method="post"  class="pageForm required-validate" id="uploadForm"  enctype="multipart/form-data">
        <div class="pageFormContent" layoutH="56">
            <p style="width: 100%;">
                <label>题目名称：</label> <input name="title" type="text" size="30" style="width:300px;" class="required" value="${question.title}"/>
            </p>
            <p style="width: 100%;">
                <label>题目类型：</label><select name="type"><option value="1">单选</option><option value="2">多选</option><option value="3">判断</option></select>
            </p>
            <p style="width: 100%;">
                <label>题目分值：</label> <input name="goals" type="text" size="30" style="width:300px;" class="required" value="${question.goals}"/>
            </p>
            <p style="width: 100%;" >
                <label>所属考试：</label>
                <select name ="belong" >
                    <c:forEach var="test" items="${examTests}" varStatus="vs">
                        <option value="${test.id}">${test.name}</option>
                    </c:forEach>
                </select>
            </p>
            <p style="width: 100%;" >
                <label>题目图片：</label> <input name="questionAttach" type="file" size="30" style="width:300px;" class="required" value="${question.goals}"/>
            </p>
            <p style="width: 100%;">
                <input type="button" onclick="javascript:addOption()" value="添加选项"/>
            </p>
            <table id="option_after"></table>
            <input type="hidden" name="id" value="${question.id}"/>
            <input type="hidden" name="count" id="count" value="${count }"/>
        </div>
        <div class="formBar">
            <ul>
                <li>
                    <div class="buttonActive">
                        <div class="buttonContent">
                            <button type="button" onclick="apiEditCallback();">保存</button>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="button">
                        <div class="buttonContent">
                            <button type="button" class="close">取消</button>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </form>
</div>
<script type="text/javascript">
    var count= parseInt("${count }");
    var deleteImg="";
    function apiEditCallback(resp) {
        $("#count").val(count);
        var formData = new FormData($( "#uploadForm" )[0]);
        $.ajax({
            type : "POST",
            url : '<c:url value="/exam/question/new"/>',
            //data : '{"userGuid":"'+userGuid+'","caseNo":"'+caseNo+'","orgId":"'+orgid+'","addr":"'+addr+'","yyTime":"'+ yyTime+'","yySpan":"'+yySpan+'","file":"'+base64+'","pt":"'+pt+'"}',
            data : formData,
            processData: false,  // 告诉jQuery不要去处理发送的数据
            contentType: false,  // 告诉jQuery不要去设置Content-Type请求头
            async : false,
            cache: false,
            success : function(resp){
                if(resp&&resp.succ){
                    alertMsg.info("操作成功！");
                    $.pdialog.closeCurrent();
                    navTab.reloadFlag('page_exam_questions')
                }else {
                    alertMsg.info(resp.msg + "!");
                }
            },
            error : function(XMLHttpRequest, textStatus,errorThrown) {
                alertMsg.info(errorThrown);
            }
        });
    }

    $(function () {
        /**
         *加载题目选项
         */
        var option = ${option };
        if (option != null && option != "" && option != undefined) {
            $.each(option,function (index, obj) {
                var html = "";
                html += " <tr class=\"mark"+obj.id+"\" style=\"line-height: 50px;\"> <td><label>选项名称：</label></td><td ><input type=\"text\" size=\"30\" style=\"width:302px;\" value=\""+obj.name+"\" name=\"name"+obj.id+"\"/></td> </tr>";
                if (obj.attach != null && obj.attach != "" && obj.attach != undefined) {
                    html += "<tr class=\"mark"+obj.id+"\" id=\"showTr"+obj.id+"\" style=\"line-height: 50px;\"><td><label><a id=\"showImg" + obj.id + "\" href=\"javascript:showImg('" + obj.attach[0].id + "')\">查看图片</a><a href=\"javascript:deleteOption('" + obj.attach[0].id + "');\">重新上传图片</a> <input type=\"button\" onclick=\"javascript:deleteOption('" + obj.id + "');\" value=\"删除\"></label></td></tr>";
                }else{
                    html+="<tr class=\"mark"+obj.id+"\" id=\"addTr"+obj.id+"\"><td><label><a href=\"addImg('" + obj.id + "')\" >添加图片</a></label></td></tr>";
                }
                $("#option_after").append(html);
            });
        }

        /**
         *加载题目选项
         */
    });
    function addOption(){
        count++;
        var html = "<tr class=\"mark"+count+"\" style=\"line-height: 50px;\"> <td><label>选项名称：</label></td><td ><input type=\"text\" size=\"30\" style=\"width:200px;\" name=\"name"+count+"\"/> 是否正确答案<input type=\"checkbox\" name=\"isanswer"+count+"\" value=\"1\"></td> </tr>";
        html+="<tr class=\"mark"+count+"\"><td><label>图片</label></td><td><input type=\"file\" style=\"width:263px;\" accept=\"image/*\" name =\"imgattach"+count+"\" /><input type=\"button\" onclick=\"javascript:deleteOption('" + count + "');\" value=\"删除\"></td></tr>"
        $("#option_after").append(html);
    }
    function deleteOption(id,type){
            $(".mark"+id).remove();
            if(type=="1"){
                if(deleteImg.length==0){
                    deleteImg+=id;
                }else{
                    deleteImg+=","+id;
                }
            }
    }
    </script>
 

